<template>
  <div class="msg">
    <img class="imgBg" src="@/assets/my/bg.png" alt>
    <ul class="set_list">
      <router-link tag="li" to="/setting">
        <i class="icon iconfont icon-shezhi f32"></i>
        <!-- <img src="@/assets/my/设置.png" alt=""> -->
      </router-link>
      <li class="tong">
        <!-- <i class="icon iconfont icon-qiandao" @click="qiandao()"></i> -->
        <router-link tag="i" to="/message" class="icon iconfont icon-xiaoxi">
          <span class="f16" v-if="amount > 0">{{amount > 10 ? '9+' : amount}}</span>
        </router-link>
        <!-- <img src="@/assets/my/签到-1.png" alt=""> -->
        <!-- <img src="@/assets/my/notification-bell.png" alt=""> -->
      </li>
    </ul>
    <dl class="my_info">
      <dt @click="setmessage">
        <img
          :src="userInfo.userPhoto"
          @error="$event.target.src = require('@/assets/my/headImg.png')"
          alt
          v-if="userInfo.userPhoto"
        >
        <span v-if="!userInfo.userPhoto">{{userInfo.userName}}</span>
      </dt>
      <dd>
        <h3 class="f32">{{userInfo.userName}}</h3>
        <!-- <div class="integral f20">
          积分
          <span>{{userInfo.userScore}}</span>
        </div> -->
        <div class="bang" v-if="!$store.state.verifyPhone & !$store.state.userPhone">
          <span @click="bangNum()">绑定手机号免费测凶吉</span>
        </div>
        <div class="number f24" v-if="!$store.state.verifyPhone & !!$store.state.userPhone">
          <span class="f28">{{$store.state.userPhone}}<b :class="fortune.symbol == '吉' ? 'green' : 'red'">({{fortune.symbol}})</b></span>
          <router-link to="/inferNumber" tag="button">查看详解>></router-link>
        </div>
        <router-link tag="div" to="/bill" class="integral f20" v-if="isOper">
          余额
          <span>{{balance}}</span>
        </router-link>
      </dd>
    </dl>
    <div class="heibg">
      <img src="@/assets/my/黑卡会员@2x.png" alt>
    </div>
    <!-- <router-link tag="div" to="/member" class="heibg"></router-link> -->
  </div>
</template>

<script>
export default {
  name: "my-info",
  props: {
    isOper: Boolean
  },
  data() {
    return {
      masters: {},
      userInfo: {},
      amount: "0",
      balance: 0,
      fortune: {}
    };
  },
  methods: {
    getInfo() {
      let params = {
        userId: this.$store.state.userId
      };
      this.$http.fetchGet("getUserDetail", params).then(
        res => {
          if (res.code == 200) {
            this.userInfo = res.data;
          } else {
            console.log(res.msg);
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    setmessage() {
      this.$router.push({
        //你需要接受路由的参数再跳转
        path: "/datum"
      });
    },
    qiandao() {
      this.$router.push({
        path: "/signIn"
      });
    },
    getMessageSummary() {
      // 获取消息通知
      let params = {
        userId: this.$store.state.userId
      };
      this.$http.fetchGet("getMessageSummary", params).then(
        res => {
          if (res.code == 200) {
            this.amount = res.data.total;
          } else {
            console.log(res.msg);
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    allMoney() { // 获取余额
      let params = {
        userId: this.$store.state.userId
      }
      this.$http.fetchGet('allMoney', params).then(res => {
        if(res.code == 200) {
          this.balance = res.data
        }
      }, err => {

      })
    },
    cesuanPhone() {
      let params = {
        phoneNumber: this.$store.state.userPhone
      }
      this.$http.fetchGet('cesuanPhone', params).then(res => {
        this.fortune = res.data
      })
    },
    bangNum() {
      this.$store.commit('showPhone', true);
    }
  },
  mounted() {
    this.getInfo();
    this.allMoney();
    this.getMessageSummary();
    console.log(this.$store.state.userPhone)
    if(!this.$store.state.verifyPhone && this.$store.state.userPhone) {
      this.cesuanPhone()
    }
  }
};
</script>

<style lang="less" scoped>
.msg {
  .h(310);
  box-sizing: border-box;
  //   background: #fff url("../assets/my/bg.png") 0px -62px no-repeat;
  background-size: 100%;
  position: relative;
  .padd(0, 20);
  overflow: hidden;
  .pt(20);
  .imgBg {
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: auto;
  }
  .heibg {
    position: absolute;
    right: -1px;
    bottom: 5px;
    .h(160);
    .w(265);
    // background: url('../assets/my/黑卡会员@2x.png') no-repeat;
    background-size: 100%;
    img {
      width: 100%;
      height: auto;
    }
  }
  .set_list {
    z-index: 99;
    display: flex;
    justify-content: space-between;
    li {
      img {
        .w(32);
        .h(34);
        &:nth-child(1) {
          .mr(20);
        }
      }
      i.icon {
        font-size: 20px;
        color: #fff;
        position: relative;
        span {
          position: absolute;
          top: -7px;
          right: -5px;
          background: red;
          border-radius: 50%;
          display: inline-block;
          .w(30);
          .h(30);
          .lh(30);
          text-align: center;
        }
      }
    }
    .tong {
      i.icon {
        .ml(10);
      }
    }
  }
  .my_info {
    display: flex;
    box-sizing: border-box;
    .pt(20);
    z-index: 1;
    dt {
      flex: 2.5;
      .w(160);
      .h(190);
      .ml(20);
      .mr(20);
      //   .mt(30);
      text-align: center;
      .lh(190);
      .mr(20);
      z-index: 1;
      img {
        .h(154);
        .w(154);
        .lh(190);
        border-radius: 50%;
      }
      span {
        border-radius: 50%;
        .w(160);
        .h(160);
        .lh(160);
        background: rgba(136, 138, 146, 0.6);
        display: inline-block;
        color: #fff;
        text-align: center;
      }
    }
    dd {
      flex: 7.5;
      color: #fff;
      .pt(20);
      z-index: 1;
      h3 {
        // font-weight: normal;
        .lh(40);
      }
      .integral {
        display: inline-block;
        border-radius: 20px;
        border: 1px solid #fff;
        .pl(10);
        .pr(10);
        .lh(36);
        text-align: center;
        color: #fff;
        .mt(10);
        span {
          .ml(10);
        }
      }
      .bang{
        border-radius: 500px;
        background: rgb(67, 183, 255);
        text-align: center;
        .w(240);
        .mt(20);
        .padd(6, 15);
        .lh(34);
      }
      .number{
        .w(320);
        .h(70);
        // background: red;
        position: relative;
        .mt(10);
        span{
          // display: block;
          b{
            font-weight: normal;
            &.green{
              color: red
            }
            &.red{
              color: red;
            }
          }
        }
        button{
          .mt(10);
          .padd(6, 10);
          border: none;
          border: 1px solid #43b7ff;
          background: #43b7ff;
          color: #fff;
          border-radius: 300px;
        }
      }
    }
  }
}
</style>

